﻿@{
    ViewBag.Title = "类别管理";
}
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
    <title>类别管理</title>
    @*--------------------应用easyUI的CSS文件---------------------*@
    <link href="~/themes/css/easyui.css" rel="stylesheet" />
    <link href="~/themes/css/icon.css" rel="stylesheet" />
    <link href="~/themes/css/Site.css" rel="stylesheet" />
    @*---------------------应用easyUI的的JS文件-----------------*@
    <script type="text/javascript" src="~/scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="~/scripts/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="~/scripts/easyui-lang-zh_CN.js"></script>
    @*修改时间格式的Js文件*@
    <script src="~/scripts/datapattern2.js"></script>
    <script src="~/scripts/ckeditor/ckeditor.js"></script>

    <script type="text/javascript">
        $(function () {

            //初始化弹出窗体
            initTable();
            BindAddButtonClickEvent();
            BingUpdateDetailsShowTextBox();

        });

        //初始化表格 
        function initTable(queryData) {
            $('#test').datagrid({
                title: '类别管理',
                iconCls: 'icon-save',
                height: 520,
                nowrap: true,
                autoRowHeight: false,
                striped: true,
                collapsible: true,
                url: '/System/GetAllType',
                sortName: 'ID',
                sortOrder: 'asc',
                //striped:true,
                border: true,
                remoteSort: false,
                idField: 'ID',
                pagination: true,
                rownumbers: true,
                queryParams: queryData,
                columns: [[
                    { field: 'ck', checkbox: true },
					{ field: 'ID', title: 'ID', width: 50, sortable: true },
                    { field: 'ParentId', title: '一级类别', width: 150, sortable: true },
                    { field: 'TypeName', title: "二级类别", width: 150, sortable: true}
                ]],

                toolbar: [{
                    id: 'btnadd',
                    text: '添加类别',
                    iconCls: 'icon-add',
                    handler: function () {
                        //实现弹出添加的层
                        ShowAddDialog();
                    }
                }, '-', {
                    id: 'btncut',
                    text: '修改类别',
                    iconCls: 'icon-cut',
                    handler: function () {
                        //实现弹出添加信息的层
                        ShowUpdateDialog();
                    }
                }, '-', {
                    id: 'btnsave',
                    text: '删除类别',
                    iconCls: 'icon-remove',
                    handler: function () {

                        DeleteInfoByClick();
                    }
                }]
            });
        }

        //弹出添加类别一对话框
        function ShowAddDialog() {
            //弹出添加用户的对话框
            $('#AddDialog').dialog('open').dialog('setTitle', '添加类别');
            //添加完成后清空文本框的值
            ClearTextBox();
        }
        //类别添加事件
        function BindAddButtonClickEvent() {
            $("#btnAdd").click(function () {
                //验证所有的文本框是否通过验证
                var valid = $('#AddDialog').form('validate');
                if (valid == false) {
                    return false;
                }
                //创建传递的参数,
                var postdata = {
                    ParentId: $("#Category").val(),
                    TypeName: $("#TypeName").val()
                };
                //发送异步请求到后台保存类别数据
                $.post("/System/AddType", postdata, function (data) {
                    if (data == "OK") {
                        //添加成功，(1)关闭对话框，刷新表格
                        alert("添加成功");
                        $('#AddDialog').dialog('close');
                        $("#test").datagrid("reload");
                    }
                    else {
                        alert("添加失败，请您检查");
                    }
                });
            });
        }

        //当添加或者修改完成后清空文本框中的值
        function ClearTextBox() {
            $("#TypeName").val("");
        }

        //弹出修改类别的对话框
        function ShowUpdateDialog() {
            var UpdateInfoID = $("#test").datagrid("getSelections");
            if (UpdateInfoID.length == 1) {
                $("#UpdateDialog").dialog("open").dialog("setTitle", "修改类别信息");
                //绑定显示修改的详细信息的内容
                BingUpdateDetailsShowTextBox();
                BindUpdateButtonClickEvent();
            }
            else {
                $.messager.alert("友情提示", "每次只能修改一行数据，你已经选择了<font color='red' size='6'>" + UpdateInfoID.length + "</font>行");
            }
        }

        function BingUpdateDetailsShowTextBox() {
            //首先获取选中的类别的ID
            var CheckID = $("#test").datagrid("getSelections")[0].ID;

            //使用异步的getJSON请求绑定前台传递过来的数据
            $.getJSON("/System/GetBindDetails", { ID: CheckID }, function (date) {
                $("#ID").val(CheckID);
                $("#ParentId").val(date.ParentId);
                $("#TypeName1").val(date.TypeName);
            });
        }
        //实现多选删除信息
        function DeleteInfoByClick() {
            var deleteInfoID = $("#test").datagrid("getSelections");
            if (deleteInfoID.length >= 1) {
                var ids = "";
                for (var i = 0; i < deleteInfoID.length; i++) {
                    ids += deleteInfoID[i].ID + ",";
                }
                //去掉最后的一个,
                ids = ids.substring(0, ids.length - 1);

                //遍历出删除的信息
                var TypeList = "";
                for (var i = 0; i < deleteInfoID.length; i++) {
                    TypeList += deleteInfoID[i].TypeName + ",";
                }
                TypeList = TypeList.substring(0, TypeList.length - 1);
                //发送异步请求删除数据
                $.messager.confirm("删除信息", "您确认删除<font color='Red' size='3'>" + TypeList + "</font>类别吗？", function (DeleteInfo) {
                    if (DeleteInfo) {
                        $.post("/System/DeleteInfo", { deleteInfoID: ids, TName: TypeList }, function (data) {
                            if (data == "OK") {
                                $.messager.alert("友情提示", "删除成功");
                                $("#test").datagrid("reload");
                                $("#test").datagrid("clearSelections");
                            }
                            else {
                                $.messager.alert("友情提示", "删除失败:" + data);
                            }
                        });
                    }
                });
            }
            else {
                $.messager.alert("友情提示", "请您选择要删除的数据");
            }
        }

        //修改类别的信息
        function BindUpdateButtonClickEvent() {
            $("#btnUpdate").click(function () {
                //首先判断前台的验证是否通过
                //alert("进入方法");
                var valid = $('#UpdateInfo').form('validate');
                if (valid == false) {
                    return false;
                }

                //构造需要修改的参数，
                var postData = {
                    ID: $("#ID").val(),
                    ParentId:$("#ParentId").val(),
                    TypeName: $("#TypeName1").val()
                };

                //使用异步实现修改信息
                $.post("/System/UpdateInfo", postData, function (date) {
                    if (date == "OK") {
                        $("#UpdateDialog").dialog('close');
                        $("#test").datagrid('reload');
                    }
                    else {
                        alert("修改失败，请检查");
                    }
                });
            });
        }

        </script>
</head>
<body>
    <div>
        <table id="test"></table>
    </div>
     @*----------------------------设置修改的的弹出层--------------------------------*@
    <div id="UpdateDialog" class="easyui-dialog" style="width:360px;height:270px;padding:10px 20px"
			closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
        <form id="UpdateInfo" method="post" novalidate="novalidate">
            <table id="tblUpdate">
                <tr>
                    <th colspan="2" >修改类别信息</th>
                </tr>
                <tr>
                    <td><label for="ID">ID:</label></td>
                    <td><input class="easyui-validatebox" type="text" id="ID" name="ID" readonly="true"/></td><td>
                </tr>
                <tr>
                    <td><input  type="hidden" id="ParentId" name="ParentId" data-options="required:true,validType:'length[1,32]'" />
                </td>
                </tr>
                <tr>
                    <td><label for="TypeName">类别名称：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="TypeName1" name="TypeName" data-options="required:true,validType:'length[1,32]'" /></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center; padding-top:10px">
                        <a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpdate" iconcls="icon-ok" >确定</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#UpdateDialog').dialog('close')">关闭</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    @*-------------------添加弹出层------------------*@
    <div id="AddDialog" class="easyui-dialog" style="width:360px;height:250px;padding:10px 20px" closed="true" resizable="true" model="true" buttons="#dlg-buttons" align="center">
        <form id="AddInfo" method="post" novalidate="novalidate">
            <table id="tblAdd">
                <tr>
                    <th colspan="2">添加类别</th>
                </tr>
                <tr>
                    <td><label for="Category">所属类别：</label></td>
                    <td>
                <select id="Category" name="Category" editable="false" style="width: 200px">
                    <option value="1" selected="selected">业务范围</option>
                    <option value="2">技术优势</option>
                    <option value="3">工程实例</option>
                    <option value="4">专业文献</option>
                </select></td>
                </tr>
                <tr>
                    <td><label for="TypeName">类别名称：</label></td>
                    <td><input class="easyui-validatebox" type="text" id="TypeName" name="TypeName" data-options="required:true,validType:'length[1,32]'"/></td><td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center; padding-top:10px">
                        <a href="javascript:void(0)" class="easyui-linkbutton" id="btnAdd" iconcls="icon-ok" >确定</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#AddDialog').dialog('close')">关闭</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>